<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <template class="my-channle">
      <van-cell :border="false">
        <div slot="title" class="title-text">我的频道</div>
        <van-button class="edit-bun" round size="mini">编辑</van-button>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="value in 3"
          :key="value"
          text="文字"
          icon="close"
        />
      </van-grid>
    </template>
    <!-- /我的频道 -->
    <!-- 推荐频道 -->
    <template class="channel-recommend">
      <van-cell :border="false">
        <div slot="title" class="title-text">推荐频道</div>
      </van-cell>
      <van-grid :gutter="10" class="recommend-grid">
        <van-grid-item class="channel-item" v-for="value in 8" :key="value">
          <van-icon name="plus" />
          <span slot="default" class="text">文本</span>
        </van-grid-item>
      </van-grid>
    </template>
    <!-- /推荐频道 -->
  </div>
</template>

<script>
export default {
  name: 'ChannelEdit',
  props: {},
  data() {
    return {}
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  components: {}
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 44px 0;
  margin-bottom: 40px;
  .title-text {
    height: 30px;
    line-height: 31px;
    font-size: 16px;
  }
  .edit-bun {
    width: 65px;
    height: 30px;
    font-size: 14px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  ::v-deep.van-grid {
    margin-bottom: 40px;
    .van-grid-item__content {
      width: 80px;
      height: 43px;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      background-color: #f4f5f6;
      .van-grid-item__icon {
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 20px;
        color: #9999;
        z-index: 2;
      }
      .van-grid-item__text {
        margin-top: 0;
      }
      .van-grid-item__text {
        text-align: center;
        font-size: 14px;
      }
    }
  }
  ::v-deep.channel-item {
    .van-icon-plus {
      font-size: 14px;
      color: #222222;
      padding-right: 5px;
    }
    .text {
      font-size: 14px;
      color: #222222;
    }
  }
}
</style>
